<template>
  <el-descriptions
    class="global-descriptions"
    title="买家收货地址"
    :column="1"
    border
  >
    <el-descriptions-item label="联系人">
      {{ getAddress?.contacts }}
    </el-descriptions-item>
    <el-descriptions-item label="联系电话">
      {{ getAddress?.mobile }}
    </el-descriptions-item>
    <el-descriptions-item label="收货地址">
      {{ getAddress?.province }}
      {{ getAddress?.city }}
      {{ getAddress?.area }}
      {{ getAddress?.street }}
    </el-descriptions-item>
    <el-descriptions-item label="邮编">
      {{ getAddress?.code || '--' }}
    </el-descriptions-item>
  </el-descriptions>

  <el-alert
    v-if="detailData.state === '3' && !detailData.isLogistics"
    type="info"
    :closable="false"
    show-icon
    title="暂无发货信息"
    description="此订单为无物流订单"
    style="margin-top: 80px"
  />

  <el-alert
    v-if="detailData.state === '2'"
    type="info"
    :closable="false"
    show-icon
    title="买家已支付，请尽快发货"
    description="不添加快递信息则代表此订单为无物流订单"
    style="margin-top: 80px"
  />

  <el-descriptions
    v-if="detailData.isLogistics || detailData.state === '2'"
    class="global-descriptions"
    title="发货信息"
    :column="1"
    border
  >
    <template #extra v-if="detailData.state === '2'">
      <el-button type="primary" @click="handleClickOpen">添加快递</el-button>
    </template>

    <el-descriptions-item
      v-for="(item, index) in tableData"
      :key="index"
      :label="'物流订单' + (index + 1)"
    >
      <div>
        <div>快递公司：{{ item.platform }}</div>
        <div>
          快递单号：{{ item.orderNo }}
          <el-button
            v-if="detailData.state === '2'"
            type="danger"
            link
            @click="handleClickDel(index)"
            style="margin-left: 16px"
            >删除</el-button
          >
        </div>
        <div v-if="detailData.state !== '2'">
          发货时间：<PipeDatetime :value="item.createTime" :showIcon="false" />
        </div>
      </div>
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    v-if="tableAppealData.length"
    class="global-descriptions"
    title="退换回寄"
    :column="1"
    border
  >
    <el-descriptions-item
      v-for="(item, index) in tableAppealData"
      :key="index"
      :label="'物流订单' + (index + 1)"
    >
      <div>
        <div>快递公司：{{ item.platform }}</div>
        <div>快递单号：{{ item.orderNo }}</div>
        <div>
          发货时间：<PipeDatetime :value="item.createTime" :showIcon="false" />
        </div>
      </div>
    </el-descriptions-item>
  </el-descriptions>

  <DialogLogistics
    v-model="dialogOpts.visible"
    :row-data="dialogOpts.data"
    @on-complete="dialogOpts.complete"
  />
</template>

<script setup lang="ts">
import { PropType, computed, reactive, ref, toRaw, watch } from 'vue';
import { InitDrawerOpts, transformPromise } from '@/utils/common';
import DialogLogistics from './dialog-logistics.vue';

// 弹窗
const dialogOpts = reactive(InitDrawerOpts());

// 普通发货
const tableData = ref<API.logistics.EntitySchema[]>([]);

// 退换回寄
const tableAppealData = ref<API.logistics.EntitySchema[]>([]);

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.order.EntitySchema>,
    default: () => ({})
  }
});

watch(
  () => props.detailData,
  (val) => {
    if (!val || !val.logistics) return;
    tableData.value = val.logistics.filter((item) => item.type === '1');
    tableAppealData.value = val.logistics.filter((item) => item.type === '2');
  },
  {
    immediate: true
  }
);

const getAddress = computed<{
  contacts: string;
  mobile: string;
  province: string;
  city: string;
  area: string;
  street: string;
  code: string;
} | null>(() =>
  props.detailData.takeInfo ? JSON.parse(props.detailData.takeInfo) : null
);

// 打开弹窗
const handleClickOpen = async () => {
  dialogOpts.visible = true;
  const res = await transformPromise<API.logistics.EntityDto>(dialogOpts);
  if (res.action !== 'submit') return;
  tableData.value.push(res.result);
};

// 删除物流
const handleClickDel = (index: number) => {
  tableData.value.splice(index, 1);
};

// 获取数据
const getFormData = (): API.logistics.EntityDto[] => {
  return toRaw(tableData.value);
};

// 暴露方法
defineExpose({
  // // 验证数据
  // validateFormData,
  // 获取数据
  getFormData
});
</script>

<style lang="scss" scoped>
.global-descriptions {
  margin-top: 16px;
}
</style>
